import 'package:flutter/material.dart';
import 'package:hong_vpn_new_20240626/ui/chat/chat.dart';
import 'package:hong_vpn_new_20240626/utils/Configs/color_config.dart';
import 'package:hong_vpn_new_20240626/utils/models/ai_model.dart';
import 'package:hong_vpn_new_20240626/utils/zz_navigator.dart';

class AiDetailsWidget extends StatefulWidget {
  final AiModel model;

  const AiDetailsWidget({super.key, required this.model});

  @override
  State<AiDetailsWidget> createState() => _AiDetailsWidgetState();
}

class _AiDetailsWidgetState extends State<AiDetailsWidget> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.model.title ?? ""),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(15).copyWith(bottom: 0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            AspectRatio(
              aspectRatio: 1,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(10),
                child: Image.asset(
                  widget.model.header ?? "assets/images/Rectangle 49.png",
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 10, bottom: 10),
              child: Row(
                children: [
                  Text(
                    widget.model.title ?? "",
                    style: const TextStyle(
                        color: Colors.white,
                        fontSize: 18,
                        fontWeight: FontWeight.w500),
                  ),
                  const Spacer(),
                  GestureDetector(
                    onTap: () {
                      widget.model.like();
                      setState(() {});
                    },
                    child: Row(
                      children: [
                        Image.asset(widget.model.isLike
                            ? "assets/images/点赞爱心.png"
                            : "assets/images/爱心点赞.png"),
                        const SizedBox(width: 5),
                        Text(
                          widget.model.likeNumFormatter,
                          style: const TextStyle(
                              color: Colors.white, fontSize: 14),
                        )
                      ],
                    ),
                  ),
                ],
              ),
            ),
            Wrap(
              spacing: 15.0, // 主轴(水平)方向间距
              runSpacing: 10.0, // 纵轴（垂直）方向间距
              alignment: WrapAlignment.start, //沿主轴方向居中
              children: widget.model.labels
                  .map((e) =>
                      labelItem(image: e.imageUrl, title: e.rawValue ?? ""))
                  .toList(),
            ),
            Padding(
                padding: const EdgeInsets.only(top: 20),
                child: Text(widget.model.description)),
            Padding(
              padding: const EdgeInsets.only(top: 20, bottom: 100),
              child: TextButton(
                onPressed: () => ZZNavigator.pushReplacement(
                    widget: ChatWidget(model: widget.model)),
                style: const ButtonStyle(
                    backgroundColor:
                        WidgetStatePropertyAll(ColorConfig.orange)),
                child: Container(
                  width: double.infinity,
                  alignment: Alignment.center,
                  child: const Text(
                    "Chat",
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 20,
                        fontWeight: FontWeight.w600),
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget labelItem({required String title, required String image}) {
    return Chip(
      avatar: Image.asset(image),
      label: Text(
        title,
        style: const TextStyle(color: ColorConfig.orange, fontSize: 14),
      ),
      backgroundColor: ColorConfig.bg,
      side: const BorderSide(color: ColorConfig.orange),
    );
  }
}
